<template>
  <div class="manage">
    <el-dialog 
      :title="operateType === 'add' ? '新增用户' : '编辑用户'"
      :visible.sync="dialogVisible"
    >
      <common-form :form="operateForm" :labelList="operateLabel" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmOperate">确 定</el-button>
      </span>
    </el-dialog>
    <div class="manage-header">
      <el-button type="primary" @click="handleAdd">+ 新增</el-button>
      <common-form inline :form="searchForm" :labelList="formLabel">
        <el-button type="primary" v-if="showSearch" #default @click="getUserData(searchForm.keyword)">搜索</el-button>
        <el-button type="primary" v-else #default @click="getUserData()">返回</el-button>
      </common-form>
    </div>
    <common-table 
      :tableData="tableData" 
      :tableLabel="tableLabel" 
      :config="config" 
      @changePage="changePage"
      @handleEdit="handleEdit"
      @handleDelete="delUser"
    />
  </div>
</template>
<script>
import { getUserData, updateUser, deleteUser, createUser } from 'network/user.js'

import CommonForm from 'components/CommonForm.vue'
import CommonTable from 'components/CommonTable.vue'

export default {
  name: 'User',
  data() {
    return {
      searchForm: {
        keyword: ''
      },
      formLabel: [
        {
          model: 'keyword',
          label: '',
          options: []
        }
      ],
      tableData: [],
      tableLabel: [
        {
          prop: 'name',
          label: '姓名'
        },
        {
          prop: 'age',
          label: '年龄'
        },
        {
          prop: 'sexLabel',
          label: '性别'
        },
        {
          prop: 'birth',
          label: '出生日期',
          width: 200
        },
        {
          prop: 'addr',
          label: '地址',
          width: 360
        },
      ],
      config: {
        page: 1,
        loading: true,
        total: 0
      },
      operateType: 'add',
      operateForm: {
        id: '',
        name: '',
        addr: '',
        age: '',
        birth: '',
        sex: ''
      },
      operateLabel: [
        {
          model: 'name',
          label: '姓名'
        },
        {
          model: 'age',
          label: '年龄',
        },
        {
          model: 'sex',
          label: '性别',
          type: 'select',
          options: [
            {
              label: '男',
              value: 1
            },
            {
              label: '女',
              value: 0
            }
          ]
        },
        {
          model: 'birth',
          label: '出生日期',
          type: 'date'
        },
        {
          model: 'addr',
          label: '地址'
        }
      ],
      dialogVisible: false,
      showSearch: true
    }
  },
  components: {
    CommonForm,
    CommonTable
  },
  methods: {
    //获取用户数据
    getUserData(name) {
      this.searchForm.keyword = ''
      if(typeof name != 'undefined') {
        console.log('开始搜索');
        getUserData(name)
          .then(res => {
            if(res.data.count === 0) {
              this.$message.error('未找到该用户');
              this.getUserData()
              return
            }
            this.showSearch = false
            this.tableData = res.data.list.map(item => {
            item.sexLabel = item.sex === 0 ? '女' : '男'
            return item
          })
          }, err => {
            console.log(err);
          })
        return
      }
      let page = this.config.page
      const limit = 9
      this.config.loading = true
      this.showSearch = true
      getUserData(name, page, limit)
        .then(res => {
          this.tableData = res.data.list.map(item => {
            item.sexLabel = item.sex === 0 ? '女' : '男'
            return item
          })
          this.config.total = Math.ceil(res.data.count / limit)
          this.config.loading = false
        }, err => {
          console.log(err);
        })
    },
    changePage(page) {
      this.config.page = page
      this.getUserData()
    },
    handleEdit(row) {
      Object.keys(row).forEach(key => {
        if(this.operateForm[key] != '') {
          delete row[key]
        }
      })
      // console.log(row);
      this.operateForm = row
      this.operateType = 'edit'
      this.dialogVisible = true
    },
    delUser(row) {
        this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteUser(row.id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    updateUser() {
      updateUser(this.operateForm)
        .then(res => {
          console.log(res.data.data.message);
          this.getUserData()
        }, err => {
          console.log(err);
        })
    },
    deleteUser(id) {
      deleteUser(id)
        .then(res => {
          this.getUserData()
          console.log(res.data.message);
        }, err => {
          console.log(err);
        })
    },
    confirmOperate() {
      this.dialogVisible = false
      if(this.operateType === 'edit') {
        this.updateUser()
      } else if(this.operateType === 'add') {
        this.createUser()
      }
    },
    handleAdd() {
      this.operateType = 'add',
      this.dialogVisible = true
    },
    createUser() {
      createUser(this.operateForm)
        .then(res => {
          console.log(res.data);
          this.getUserData()
        }, err => {
          console.log(err);
        })
    }
  },
  created() {
    //获取用户数据
    this.getUserData()
  },
  
}
</script>
<style lang="scss" scoped>
  .manage {
    height: 90%;
    padding-bottom: 20px;
    overflow: hidden;
    position: relative;
    &-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
  }
</style>